<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryParamsRef" :inline="true" :model="queryParams" label-width="100px">
        <el-form-item label="手术申请时间" prop="surgeryApplyDate">
          <el-date-picker v-model="queryParams.surgeryApplyDate"
                          clearable
                          placeholder="请选择手术申请时间"
                          type="date"
                          value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手术室" prop="surgeryName">
          <el-input
            v-model="queryParams.surgeryName"
            clearable
            placeholder="请输入手术室"
          />
        </el-form-item>
        <el-form-item label="手术间" prop="surgeryNoName">
          <el-input
            v-model="queryParams.surgeryNoName"
            clearable
            placeholder="请输入手术间"
          />
        </el-form-item>
        <el-form-item>
          <query-form-button @handleQuery="handleQuery" @resetQuery="resetQuery"/>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane label="手术预约">
        <el-table v-adaptive="275" :border="true" :data="surgeryApplyList" :header-cell-style="$headerCellStyle"
                  :stripe="true" highlight-current-row>
          <el-table-column :align="'center'" label="手术申请时间" prop="surgeryApplyDate" width="180">
            <template #default="scope">
              <span>{{ $parseTime(scope.row.surgeryApplyDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="手术日期及时间" prop="scheduledDate" width="180">
            <template #default="scope">
              <span>{{ $parseTime(scope.row.scheduledDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="开单医生" prop="applyUserName"/>
          <el-table-column :align="'center'" label="开单科室" prop="applyDeptName"/>
          <el-table-column :align="'center'" label="手术室" prop="surgeryName"/>
          <el-table-column :align="'center'" label="手术间" prop="surgeryNoName"/>
          <el-table-column :align="'center'" label="麻醉方法" prop="anesthesiaMethod">
            <template #default="scope">
              <dict-data-tag :options="dictDataMap['anesthesia_method']" :value="scope.row.anesthesiaMethod"/>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="手术状态" prop="surgeryStatus">
            <template #default="scope">
              <dict-data-tag :options="dictDataMap['surgery_status']" :value="scope.row.surgeryStatus"/>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="艾滋标记" prop="hivFlag">
            <template #default="scope">
              <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.hivFlag"/>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="乙肝标记" prop="hbvFlag">
            <template #default="scope">
              <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.hbvFlag"/>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="是否梅毒" prop="syphilisFlag">
            <template #default="scope">
              <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.syphilisFlag"/>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" label="是否洗手" prop="washHands">
            <template #default="scope">
              <dict-data-tag :options="dictDataMap['sys_yes_no']" :value="scope.row.washHands"/>
            </template>
          </el-table-column>
          <el-table-column :align="'center'" :show-overflow-tooltip="true" label="备注信息" prop="remarks" width="200"/>
          <el-table-column :align="'center'" class-name="small-padding fixed-width" label="操作" width="100">
            <template #default="scope">
              <el-button
                type="success"
                @click="handleUpdate(scope.row)"
              >
                <svg-icon class="mr5" icon-class="an-pai"/>
                安排
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum"
                    :total="total" @pagination="getList"/>
      </el-tab-pane>
      <el-tab-pane label="手术安排">手术安排</el-tab-pane>
    </el-tabs>
  </div>
</template>


<script lang="ts" setup>

import {useDictStoreHook} from "@/store/modules/dict.ts";
import {selectPageSurgeryApply} from "@/api/surgery/surgeryApply.ts";
import {useUserStoreHook} from "@/store/modules/user.ts";

const dictStore = useDictStoreHook();
const dictDataMap = ref(dictStore.isTypeGetData('surgery_status', 'incision_grade', 'anesthesia_method', 'sys_yes_no'))
const useUserStore = useUserStoreHook();
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const queryParams = ref<any>({
  pageNum: 1,
  pageSize: 30,
  surgeryApplyDate: '',
  surgeryName: '',
  surgeryNoName: '',
  patientCondition: '',
  surgeryScale: '',
  orgId: userInfo.orgId
})

const surgeryApplyList = ref([]);
const total = ref(0);

/** 查询手术登记列表 */
function getList() {

  selectPageSurgeryApply(queryParams.value).then((response: any) => {
    surgeryApplyList.value = response.rows;
    total.value = response.total;
  });
}

function handleQuery() {

}

function resetQuery() {

}

onMounted(() => {
  getList()
})


</script>

<style scoped>

:deep(.el-tabs--border-card>.el-tabs__content ) {
  padding-bottom: 40px;
}

</style>
